<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>

  <div class="wrapper" :style="{ width: (screenWidth - 300) + 'px' }">
    <SketchRule :lang="lang" :thick="20" :scale="scale" :width="screenWidth - 300 - 20" :height="890"
      :startX="-(screenWidth - 800 - 375 - 42)" :startY="startY" :shadow="shadow" :horLineArr="pageRules.h"
      :verLineArr="pageRules.v" :cornerActive="true" @handleLine="handleLine">
    </SketchRule>
  </div>
</template>

<style scoped>
.wrapper {
  /* background-color: #f5f5f5; */
  position: absolute;
  top: -110px;
  left: 0px;
  width: 450px;
  height: 910px;
  border: 1px solid #DADADC;
}

#screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.screen-container {
  position: absolute;
  width: 5000px;
  height: 3000px;
}

.scale-value {
  position: absolute;
  left: 0;
  bottom: 100%;
}

.button {
  position: absolute;
  left: 100px;
  bottom: 100%;
}

.button-ch {
  position: absolute;
  left: 200px;
  bottom: 100%;
}

.button-en {
  position: absolute;
  left: 230px;
  bottom: 100%;
}

#canvas {
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 200px;
  background: lightblue;
  transform-origin: 50% 0;
}
</style>

<script>
import Vue from "vue";
import SketchRule from "vue-sketch-ruler";
export default {
  name: "pagemaker",
  props: {
  },
  components: {
    SketchRule
  },
  mounted() {
    // var screenWidth = window.screen.width;
    // this.screenWidth = window.innerWidth
    console.log(555, this.screenWidth);
    window.addEventListener('resize', this.screenWidthResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.screenWidthResize);
  },
  data() {
    return {
      loading: false,
      scale: 0.5, //658813476562495, //1,
      startX: -33,
      startY: -30,
      lines: {
        h: [20, 730, 0, 750],
        v: [234, 514]
      },
      thick: 20,
      lang: "zh-CN",
      isShowRuler: true,
      isShowReferLine: true,
      screenWidth: window.innerWidth,
    };
  },

  computed: {
    pageKey: function () {
      return this.$store.state.pagemaker.pageKey;
    },
    pageRules: function () {
      return this.$store.state.pagemaker.pageRules;
    },
    shadow() {
      return {
        x: 0,
        y: 0,
        width: 0,
        height: 0
      }
    },
  },

  methods: {
    screenWidthResize() {
      this.screenWidth = window.innerWidth;
    },
    pageScroll(h, rect) {
      console.log(h);
      const startY = (this.thick + h - 50);
      this.startY = startY >> 0;
    },
    handleLine(e) {
      // console.log(e);
      this.$store.commit("pagemaker/setRules", e)
    }
  },
};
</script>
